const mixin = {
  data () {
    return {
      dataLs: [],
      settings: {},
      title: ''
    }
  },
  created () {
    let comp = this.$store.state.compDataLs.find(item => item.id === this.compId)
    if (comp) {
      let {name, settings, dataLs} = comp
      this.dataLs = dataLs
      this.settings = settings
      this.title = name
      this.$store.commit('REGISTER', this)
    }
  },
  methods: {
    getSettingStatus (type) {
      if (this.settings.switchLs) {
        let item = this.settings.switchLs.find(item => item.type === type)
        return (item && item.status) || false
      }
      return false
    },
    onDrag (event) {
      let dom = this.$el
      let initX = parseInt(event.clientX), initY = parseInt(event.clientY)
      let {left, top} = dom.getBoundingClientRect()
      let width = dom.offsetWidth, height = dom.offsetHeight
      dom.style.zIndex = '5'
      dom.style.background = 'white'
      dom.style.position = 'fixed'
      dom.style.left = `${left}px`
      dom.style.top = `${top}px`
      dom.style.width = `${width}px`

      let mouseMove = me => {
        let newLeft = parseInt(me.clientX) - initX + left
        let newTop = parseInt(me.clientY) - initY + top
        dom.style.left = `${newLeft}px`
        dom.style.top = `${newTop}px`
        this.checkMovingPos(newLeft, newTop, width)
      }
      document.addEventListener('mousemove', mouseMove)

      document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', mouseMove)
        dom.style.zIndex = ''
        dom.style.background = ''
        dom.style.left = ''
        dom.style.top = ''
        dom.style.position = 'relative'
        this.$store.commit('SET_MOVED_DATA')
      }, {once: true})
      this.$store.commit('SET_MOVING_DATA', {id: this.compId, height})
    },
    checkMovingPos (newLeft, newTop, width) {
      let max = 0, id = -1, insertPos = '',
        ox1 = newLeft,
        ox2 = newLeft + width,
        oy1 = newTop,
        oy2 = newTop + 30,
        base = {ox1, ox2, oy1, oy2}
      for (let i = 0; i < this.$store.state.compLs.length; i++) {
        let comp = this.$store.state.compLs[i]
        if (comp.compId !== this.compId && (comp.compId > 2 || isNaN(comp.compId))) {
          let {area, pos} = this.checkArea(comp, base)
          if (area > max && area > 10) {
            max = area
            insertPos = pos
            id = comp.compId
          }
        }
      }

      if (id !== this.compId && id !== -1) {
        this.$store.commit('SET_MOVING_INDEX', {id, insertPos})
      }
    },
    checkArea (comp, base) {
      let
        {left, top} = comp.$el.getBoundingClientRect(),
        x1 = left,
        x2 = x1 + comp.$el.offsetWidth,
        topY1 = top,
        bottomY2 = topY1 + comp.$el.offsetHeight,
        topY2 = topY1 + (bottomY2 - topY1) / 2,
        bottomY1 = topY2,
        topArea = this.calcArea({x1, x2, y1: topY1, y2: topY2}, base),
        bottomArea = this.calcArea({x1, x2, y1: bottomY1, y2: bottomY2}, base)
      return topArea > bottomArea ? {pos: 'before', area: topArea} : {pos: 'after', area: bottomArea}
    },
    calcArea ({x1, x2, y1, y2}, {ox1, ox2, oy1, oy2}) {
      if (x1 >= ox2 || ox1 >= x2 || y2 <= oy1 || y1 >= oy2) {
        return 0
      }
      let lx1 = Math.max(x1, ox1),
        lx2 = Math.min(x2, ox2),
        ly1 = Math.max(y1, oy1),
        ly2 = Math.min(y2, oy2)
      return (lx2 - lx1) * (ly2 - ly1)
    }
  },
  computed: {
    getModColor () {
      return this.$store.state.globalStyle.modStyle && this.$store.state.globalStyle.modStyle.color
    },
    getModBottom () {
      return this.$store.state.globalStyle.modStyle && {paddingBottom: this.$store.state.globalStyle.modStyle.paddingBottom}
    }
  }
}
export default mixin
